import React, { useState, useEffect, useCallback } from 'react';
import { Modal } from 'antd';
import DetailBox from './components/DetailBox';

interface OrderDetailsProps {
  isDetailVisible: boolean;
  onCancel: () => void;
  orderDetails: any;
}

const OrderDetails: React.FC<OrderDetailsProps> = ({
  isDetailVisible,
  onCancel,
  orderDetails,
}) => {
  const [orderItem, setOrderItem] = useState<any>({});
  const handleCancel = useCallback(() => {
    onCancel();
  }, [onCancel]);

  useEffect(() => {
    if (isDetailVisible) {
      setOrderItem(orderDetails);
    }
  }, [isDetailVisible]);

  return (
    <Modal
      title="订单详情"
      visible={isDetailVisible}
      onCancel={handleCancel}
      footer={null}
    >
      {orderItem?.goods?.data.map((item: any, index: number) => {
        return (
          <DetailBox
            key={item.id}
            src={item.cover_url}
            title={item.title}
            price={orderItem?.orderDetails?.data[index].price}
            number={orderItem?.orderDetails?.data[index].num}
          />
        );
      })}
    </Modal>
  );
};
export default OrderDetails;
